<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-05-26 09:16:44
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-08-15 14:24:56
 * @FilePath: /vue3-cesium-plus/src/components/control/vc-search.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="vc-compass-control" :style="positionStyle" >
      <div class="vc-button" @click="onTap">
            <img src="@/assets/images/home/ic_home_compass.png" class="image" />
            <span>罗盘</span>
      </div>
    </div>

      <vc-entity
      ref="entity"
      
      :position="position"

    >
      <vc-graphics-billboard
        :image="billboard.image"
        :width="billboard.width"
        :height="billboard.height"
        :scale="billboard.scale"
         :distance-display-condition="{ near: 0, far: 1000 }"
        :heightReference="2"
      ></vc-graphics-billboard>
    </vc-entity>
  </template>
  
<script setup lang="ts">

import { ref } from 'vue'
import { positionProps, usePosition } from '../composables/usePosition'
import * as Cesium from 'cesium'
// import { useCustomCesium } from "../useCustomCesium";
// const {vueCesium} = useCustomCesium();
const props = defineProps({
    ...positionProps,
})
const { positionStyle } = usePosition(props)

const entity = ref()
const billboard = ref({
  id:"compass",
  image: 'https://zouyaoji.top/vue-cesium/favicon.png',
  scale: 0.5,
  width:200,
  height:200,
})
const  position = ref(Cesium.Cartesian3.fromDegrees(116.397, 39.917, 0))
const onTap = ()=>{

  
}

// const getImage =()=>{
//   const canvas = document.createElement('canvas');

// }


</script>
  
<style scoped lang="scss">
  .vc-compass-control{
    position: absolute;
    z-index: 100;
    .vc-button{
      img{
        width: 16px;
        height: 16px;
      }
    }
    
  }
</style>